<template>
  <div class="login-view">
    <section class="title">
      <h1>WAdmin 后台管理系统</h1>
    </section>
    <section class="content">
      <a-form :model="form" ref="formRef" :rules="rules">
        <a-form-item name="name" :wrapper-col="itemCol">
          <a-input v-model:value="form.name" placeholder="请输入用户名" >
            <template #prefix><user-outlined/></template>
          </a-input>
        </a-form-item>

        <a-form-item name="password" :wrapper-col="itemCol">
          <a-input-password v-model:value="form.password" placeholder="请输入登录密码">
            <template #prefix><lock-outlined /></template>
          </a-input-password>
        </a-form-item>

        <a-form-item name="verify" :wrapper-col="itemCol">
          <a-input v-model:value="form.verify" placeholder="请输入验证码">
            <template #prefix><verified-outlined /></template>
          </a-input>

          <div class="verify-view">
            <img src="http://captcha.qq.com/getimage?aid=2000201&uin=0&0.7793003361134221" alt="验证码">
            <a href="javascript:;">看不清楚 换一张</a>
          </div>
        </a-form-item>

        <a-form-item class="error-infos" :wrapper-col="itemCol" style="margin-bottom:0px">
          <a-button type="primary" @click="submit" block>登录</a-button>
        </a-form-item>

        <a-form-item>
          <a-checkbox-group v-model:value="form.history">
            <a-checkbox value="1" name="history">记住我</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </section>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { UserOutlined, LockOutlined, VerifiedOutlined } from '@ant-design/icons-vue'
import { Form } from 'ant-design-vue'

type FormState = {
  name: string,
  password: string,
  verify: string
}

@Options({
  components: { UserOutlined, LockOutlined, VerifiedOutlined },
  props: {}
})
export default class Login extends Vue {
  // 表单布局
  itemCol = {span: 24};

  // 表单校验
  rules = {
    name: [{required: true, message: '请输入用户名', trigger: 'blur'}],
    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
    verify: [{required: true, message: '请输入验证码', trigger: 'blur'}]
  }
  
  // 表单
  form: FormState = {
    name: '',
    password: '',
    verify: ''
  }

  $refs!: {
    formRef: InstanceType<typeof Form>
  }

  // 表单提交
  async submit() {
    const formRef = this.$refs.formRef;
    let validate: FormState;

    try {
      validate = await formRef.validate();
    } catch (error) {
      return;
    }
  }
}
</script>

<style lang="scss" scoped>
.login-view {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/background.svg') no-repeat;
  background-position: center 110px;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    margin-top: 150px;

    h1 {
      font-size: 30px;
    }
  }

  .content {
    width: 330px;

    .verify-view {
      margin-top: 10px;

      img {
        width: 100px;
        margin-right: 20px;
      }
    }
  }
}
</style>
